<!-- <template>
    <div class="search">
        <div class="search-container">
            <el-input placeholder="请输入内容" v-model="searchQuery" class="search-input" @keyup.enter="onSearch"
                suffix-icon="search">
            </el-input>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            searchQuery: '',
            backgroundStyle: {
                backgroundSize: 'cover',
                height: '100vh',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                position: 'relative'
            }
        }
    },
    methods: {
        onSearch() {
            console.log(`Searching for: ${this.searchQuery}`);
            // 这里可以添加搜索逻辑
        },
        goToUserCenter() {
            console.log('Going to user center');
            // 跳转到个人中心逻辑
        }
    }
}
</script>

<style scoped>
.search {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100vh;
    /* 设置容器高度为视口高度 */
}

.search-container {
    width: 60%;

    .search-input {
        width: 100%;
        /* 设置搜索框的宽度 */
        height: 70px;
        /* 设置搜索框的高度 */
        border-radius: 70px;
        border-radius: 20px;
        /* 设置圆角 */
        transition: border-color 0.3s;
        /* 添加边框颜色变化的过渡效果 */
    }
}



.search-input:focus {
    border-color: #409eff;
    /* 设置聚焦时的边框颜色 */
}

@keyframes flashing-border {
    0% {
        border-color: #409eff;
    }

    50% {
        border-color: #66b1ff;
    }

    100% {
        border-color: #409eff;
    }
}

.search-input.flashing {
    animation: flashing-border 2s infinite;
    /* 添加动画效果 */
}

.user-center {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
</style> -->

<template>
    <div class="search-box">
      <input 
        type="text" 
        v-model="query" 
        placeholder="Search here..." 
        @focus="onFocus" 
        @blur="onBlur"
      />
      <button @click="search">
        <i class="fas fa-search"></i> <!-- 确保你有引入FontAwesome或其他图标库 -->
      </button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SearchBox',
    data() {
      return {
        query: ''
      }
    },
    methods: {
      search() {
        // 实现搜索逻辑
        console.log('Searching for:', this.query);
        // 这里可以添加代码来执行搜索动作，例如调用API等。
      },
      onFocus() {
        console.log('Input focused');
      },
      onBlur() {
        console.log('Input blurred');
      }
    }
  }
  </script>
  
  <style scoped>
  .search-box {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .search-box input {
    width: 100%;
    padding: 10px 15px;
    border-radius: 25px;
    border: 2px solid #ddd;
    transition: all 0.3s ease;
    outline: none;
  }
  
  .search-box input:focus {
    border-color: #008CBA;
  }
  
  .search-box button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    outline: none;
  }
  
  .search-box button:hover {
    color: #008CBA;
  }
  </style>